<template>
  <el-drawer
    class="c-drawer"
    :class="[
      props.tips || $slots.tips ? 'c-drawer--has-tips' : '',
      props.size === 'auto' ? 'c-drawer__size--auto' : ''
    ]"
    v-model="visibleComputed"
    @mouseenter="showClose = true"
    @mouseleave="!showCloseBtn ? (showClose = false) : (showClose = true)"
    :show-close="showClose && !props.loading"
    :close-on-click-modal="!props.loading"
    :close-on-press-escape="false"
    :size="sizeComputed"
  >
    <template #header>
      <div class="c-drawer__header">
        <div class="c-drawer__header-text">
          <div class="c-drawer__header-text--title" v-ellTooltip>{{ props.title }}</div>

          <div class="c-drawer__header-text--tips g-ell" v-if="props.tips || $slots.tips">
            <slot name="tips">
              {{ props.tips }}
            </slot>
          </div>
        </div>
        <div class="c-drawer__header-op" v-if="$slots.headerOp || props.needOperationBtn">
          <slot name="headerOp">
            <template v-if="props.needOperationBtn">
              <el-button
                @click="visibleComputed = false"
                :loading="props.loading"
                v-if="props.showCancelButton"
                >{{ props.cancelText }}</el-button
              >
              <el-button type="primary" @click="onConfirm" :loading="props.loading">{{
                props.confirmText
              }}</el-button>
            </template>
          </slot>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-drawer>
</template>

<script lang="ts">
export default {
  name: 'CDrawer'
};
</script>
<script lang="ts" setup name="CDrawer">
import { defineProps, defineEmits, computed, ref } from 'vue';
import { drawerProps, drawerSizeMap } from './drawer';

const props = defineProps(drawerProps);
const emit = defineEmits(['update:visible', 'confirm']);
const visibleComputed = computed({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});

const sizeComputed = computed(() => {
  return drawerSizeMap[props.size];
});

// 关闭按钮
const showClose = ref(props.showCloseBtn);

/**
 * 确定操作
 */
function onConfirm() {
  emit('confirm');
}
</script>

<style lang="scss">
@use '../styles/drawer.scss' as *;
</style>
